vue.jsでAjax通信（Laravel）

#vue.jsでAjax通信（Laravel）| 来源: 网络整理| 查看: 265

はじめに

vue.jsでAjax通信を実装しました。備忘録として残しておきます。

開発環境開発環境バージョン Laravel 10.1.5 PHP 8.2.3 vue.js 3.2.47 実装内容 AjaxComponent.vue 設定画面 Ajax開始する export default { data() { return { ajaxURL: "通信先URL" } }, methods:{ regist:function() { const data = { ajaxdata: '渡したい値' } axios.post(this.ajaxURL, data) .then( response => { console.log('通知成功です', response); }).catch( error => { console.log('通信失敗です（error情報）', error); } ); }, } }; web.php Route::any('/home/regist', [App\Http\Controllers\HomeController::class, 'regist'])->name('home.regist'); AjaxController.php // ... 略 // 設定情報を登録する public function regist(Request $request){ // 入力された情報を取得する $postData = $request->all(); // js側に渡したい値を返す return response()->json("js側に渡したい値"); }

@submit.prevent をつけることで、画面遷移を防ぐことができます。

終わりに

最後までご覧いただきありがとうございます。ご指摘、ご意見ありましたらよろしくお願いいたします。

【本文地址】

公司简介

联系我们